<template>
  <div>
    <div class="login-wrap" v-show="showLogin">
      <h3>Amazon</h3>
      <h4>Coupon Issuing Platform</h4>
      <input class="email" type="text" placeholder="Email address" v-model="useremail">
      <input class="user" type="text" placeholder="User name  (nullable)" v-model="username">
      <button v-on:click="login">sign in</button>
      <p v-show="showTishi">{{tishi}}</p>
      <div><span>{{msg}}</span></div>
    </div>
  </div>
</template>

<style scope>
.login-wrap {
  text-align: center;
  margin-top: 130px;
}
h3 {
  font-size: 32px;
  color: black
}
h4 {
  font-size: 26px;
  color: black
}
.email {
  background-image: url(../../assets/pic/youjian.png);
  background-size: 30px /*no*/ 30px /*no*/;
  background-position: 5px /*no*/ 4px /*no*/;
  background-repeat: no-repeat;
  display: block;
  width: 250px /*no*/;
  height: 40px /*no*/;
  line-height: 40px /*no*/;
  margin: 0 auto;
  margin-bottom: 10px /*no*/;
  outline: none;
  /* border: 1px solid #888; */
  padding-left: 50px /*no*/;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  cursor: text;
  border-style: none;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: #ec3a4e;
}
.user {
  background-image: url(../../assets/pic/person.png);
  background-size: 30px /*no*/ 30px /*no*/;
  background-position: 5px /*no*/ 4px /*no*/;
  background-repeat: no-repeat;
  display: block;
  width: 250px /*no*/;
  height: 40px /*no*/;
  line-height: 40px /*no*/;
  margin: 0 auto;
  margin-bottom: 10px /*no*/;
  outline: none;
  /* border: 1px solid #888; */
  padding-left: 50px /*no*/;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  cursor: text;
  border-style: none;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: #ec3a4e;
}
p {
  color: red;
}
button {
  display: block;
  width: 250px /*no*/;
  height: 40px /*no*/;
  line-height: 40px /*no*/;
  margin: 20px /*no*/ auto;
  border: none;
  background-color: #fdebed;
  color: #ec3a4e;
  font-size: 16px /*px*/;
  margin-bottom: 5px /*no*/;
  border-radius: 20px /*no*/;
}
span {
  cursor: pointer;
}
span:hover {
  color: #41b883;
}
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
import * as types from '../../store/types'
import Cookies from 'js-cookie';
export default {
  data() {
    return {
      showLogin: true,
      showTishi: false,
      tishi: "",
      useremail: "",
      username: "",
      msg:"",
      cookie:[]
    };
  },
  methods: {
    login() {
      var regEmail=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (this.useremail == "") {
        alert("Please enter your email");
      } else if(!regEmail.test(this.useremail)) {
        alert("邮箱格式不正确");
      }else {
        let data = { email: this.useremail, userName: this.username };
        console.log(data);
        this.$store.commit(types.USER,data);
        console.log(this.$store.state.user);
        // Cookies.set('Email',this.useremail,{expires: 7})

        this.$http.post(
          "http://106.13.96.243:8080/Neuq_JavaWeb_war_exploded/LoginController/handleLoginRequest"
,data,{emulateJSON:true}).then(res => {
            console.log(res);
            if (res.data.statu == 10000) {
              this.tishi = "login successfully";
              this.showTishi = true;
              // this.cookie= data;
              // console.log(cookie);
              setTimeout(
                function() {
                  this.$router.push('/home');
                }.bind(this),
                1000
              );
            } else {
              this.tishi = "login failure";
              this.showTishi = true;
              this.useremail = "";
              this.username = "";
            }
          });
      }
    }
  }
};
</script>